[#ftl]
[@define "agile._AssociateEditor","agile._MetadataAware"][#--agile._MetadataEditor--]
	[#assign templateString]
	<div style="width:100%">
	<div data-dojo-attach-point="editor" data-dojo-type='dijit/form/FilteringSelect' style="left:0px;top:0px;">{options}</div>
	<div data-dojo-attach-point="editor2" data-dojo-type='dijit/form/ValidationTextBox'></div>
	</div>  
	[/#assign]
	templateString:"${templateString?js_string}"	
	,options:null
	,_valueRegExp:null
	,constructor:function(){
		this.options = [];
		this._valueRegExp = {};			
	}
	,init:function(){
		var self = this;
		this.editor2.validator = function(value,constraints){				
			var regExp = self._valueRegExp[self.editor.get("value")];			
			if(regExp){
				return regExp.test(value);
			}				
			return true;		
		};
		agile.onEnterKeyPress(this.editor2,lang.hitch(this,"onEnterKeyPress"));
		
		for(var i = 0 ; i < this.options.length; i++){		
			if(this.options[i].title && this.options[i].title.indexOf("i18n_") == 0){
				this.options[i].title = agile.i18n(this.options[i].title.substring(5),null,true);
			}
		}
		this.editor.set("value","");
		this.editor.on("change",lang.hitch(this,function(value){		
			this.editor2.reset1("value","");
			if(value != null){
				for(var i = 0 ; i < this.options.length; i++){
					if(this.options[i].value == value){
						this.editor2.set("title",this.options[i].title);
						this.editor2.set("placeHolder",this.options[i].placeHolder);
						this.editor2.set("unit",this.options[i].unit?this.options[i].unit:"");
						break;
					}
				}
			}else{
				this.onChange(null,this.name,this.htmlName);
			}
		}));
		
		this.editor2.on("change",lang.hitch(this,function(value){
			if(!this.editor2.isValid || this.editor2.isValid()){
				this.onChange(this.get("value"),this.name,this.htmlName);
			}
		}));	
		
	}
	
	,postMixInProperties:function(){
		var optionInnerHTML = "";
		var options = this.options;
		if(options && options.length > 0){
			for(var i = 0; i < options.length; i++){
				optionInnerHTML += "<option value='"+options[i].value+"'>"+options[i].value+"</option>";	
				
				if(options[i].regExp && options[i].regExp != "" && !this._valueRegExp[options[i].value]){
					this._valueRegExp[options[i].value] = new RegExp(options[i].regExp);
				}
			}		
		}		
		this.templateString = lang.replace(this.templateString,{options:optionInnerHTML});	
	}
	,get:function(name){
		if(name == "value"){
			return this.format(this.editor.get("value"),this.editor2.get("value"));
		}else{
			return this.inherited(arguments);
		}
	}
	,set:function(name,value){
		if(name == "value"){
			var values = this.parse(value);
			this.editor.reset1("value",values?values[0]:"");
			this.editor2.reset1("value",values?values[1]:"");
		}else{
			this.inherited(arguments);
		}
	}
	,reset1:function(name,value){
		if(name == "value"){
			var values = this.parse(value);
			this.editor.reset1("value",values?values[0]:"");
			this.editor2.reset1("value",values?values[1]:"");
		}else{
			this.inherited(arguments);
		}
	}
[/@] 

[@define "agile.TransformOptionEditor","agile._AssociateEditor"]
	constructor:function(){
		this.options = [
		{value:"matrix",regExp:"",/*options:[],*/placeHolder:"0,0,0,0,0,0",title:"i18n_transform_matrix",unit:""}
		//,{value:"matrix3d",regExp:"",/*options:[],*/placeHolder:"",title:""}
		//,{value:"translate",regExp:"^(-?[0-9]+(px|em),-?[0-9]+(px|em))$",/*options:[],*/placeHolder:"0,0",title:"i18n_translate_x_y",unit:"px|em"}
		,{value:"translate",regExp:"^(-?[0-9]+(px)?,-?[0-9]+(px)?)$",/*options:[],*/placeHolder:"0px,0px",title:"i18n_translate_x_y",unit:"px"}
		//,{value:"translate3d",regExp:"^(-?[0-9]+,-?[0-9]+,-?[0-9]+)$",/*options:[],*/placeHolder:"0,0,0",title:""}
		//,{value:"translateX",regExp:"^(-?[0-9]+)$",/*options:[],*/placeHolder:"0",title:"translate by x"}
		//,{value:"translateY",regExp:"^(-?[0-9]+)$",/*options:[],*/placeHolder:"0",title:"translate by y"}
		//,{value:"translateZ",regExp:"^(-?[0-9]+)$",/*options:[],*/placeHolder:"0",title:""}
		,{value:"scale",regExp:"^(-?[0-9](\.[0-9]+)?,-?[0-9](\.[0-9]+))$",/*options:[],*/placeHolder:"0.0,0.0",title:"i18n_scale_x_y",unit:""}
		//,{value:"scale3d",regExp:"",/*options:[],*/placeHolder:"",title:""}
		//,{value:"scaleX",regExp:"^(-?[0-9](\.[0-9]+))$",/*options:[],*/placeHolder:"0.0",title:"scale by x"}
		//,{value:"scaleY",regExp:"^(-?[0-9](\.[0-9]+))$",/*options:[],*/placeHolder:"0.0",title:"scale by y"}
		//,{value:"scaleZ",regExp:"^(-?[0-9](\.[0-9]+))$",/*options:[],*/placeHolder:"0.0",title:""}
		,{value:"rotate",regExp:"^(-?[0-9]+(deg)?)$",/*options:[],*/placeHolder:"0deg",title:"i18n_rotate",unit:"deg"}
		//,{value:"rotate3d",regExp:"",/*options:[],*/placeHolder:"x,y,z,angle",title:"x,y,z,angle"}
		//,{value:"rotateX",regExp:"^(-?[0-9]+(deg)?)$",/*options:[],*/placeHolder:"0deg",title:"X degree"}
		//,{value:"rotateY",regExp:"^(-?[0-9]+(deg)?)$",/*options:[],*/placeHolder:"0deg",title:"Y degree"}
		//,{value:"rotateZ",regExp:"^(-?[0-9]+(deg)?)$",/*options:[],*/placeHolder:"0",title:"Z degree"}
		,{value:"skew",regExp:"^(-?[0-9]+(deg)?,-?[0-9]+(deg)?)$",/*options:[],*/placeHolder:"0deg,0deg",title:"i18n_skew",unit:"deg"}
		//,{value:"skewX",regExp:"^(-?[0-9]+(deg)?)$",/*options:[],*/placeHolder:"0deg",title:"X degree"}
		//,{value:"skewY",regExp:"^(-?[0-9]+(deg)?)$",/*options:[],*/placeHolder:"0deg",title:"Y degree"}
		//,{value:"skewZ",regExp:"^(-?[0-9]+(deg)?)$",/*options:[],*/placeHolder:"0deg",title:"Z degree"}
		//,{value:"perspective",regExp:"^([0-9]+)$",/*options:[],*/placeHolder:"0",title:""}
		];		
	}
	,init:function(){
		this.inherited(arguments);
//		aspect.after(this,"onStartup",lang.hitch(this,function(){		
			this.editor2.on("blur",lang.hitch(this,function(){		
				if(this.editor2.isValid()){
					var value = this.editor2.get("value");
					var name = this.editor.get("value");
		//			//console.log("@@@@@@@@@name=",name,"value=",value);
					switch(name){					
						case "skew":	
							value = value.replace(/deg/g,"").split(",");
							value = value[0]+"deg,"+value[1]+"deg";
						break;
						case "translate":
							value = value.replace(/px/g,"").split(",");
							value = value[0]+"px,"+value[1]+"px";
							break;
//						case "rotate3d":
//							break;
						case "rotate":	
//						case "rotateX":					
//						case "rotateY":					
//						case "rotateZ":
//						case "skewX":					
//						case "skewY":					
//						case "skewZ":
							value = value.replace(/deg/g,"")+"deg";
							break;	
					}
		//			//console.log("######name=",name,"value=",value);
					this.editor2.reset1("value",value);
				}
			}));
//		}));
	}
	,format:function(v1,v2){
		if(!v1 || !v2){
			return "";
		}
		
		switch(v1){
			case "skew":
				v2 = v2.replace(/deg/g,"").split(",");
				v2 = v2[0]+"deg,"+v2[1]+"deg";
				break;
			case "translate":
				v2 = v2.replace(/px/g,"").split(",");
				v2 = v2[0]+"px,"+v2[1]+"px";
				break;
			case "rotate":
				v2 = v2.replace(/deg/g,"")+"deg";
				break;
		}
		return v1 +"(" + v2 +")";
	}
	,parse:function(value){
		var v = null;
		if(value && value.indexOf("(") != -1){
			v = [];
			v[0] = value.substring(0,value.indexOf("("));
			v[1] = value.substring(value.indexOf("(") + 1,value.indexOf(")"));
		}		
		return v;
	}
//	,get:function(name){
//		if(name == "value"){
//			var value = this.editor2.get("value");
//			switch(this.editor.get("value")){
//				case "skew":
//					value = value.replace(/deg/g,"").split(",");
//					value = value[0]+"deg,"+value[1]+"deg";
//					break;
//				case "translate":
//					value = value.replace(/px/g,"").split(",");
//					value = value[0]+"px,"+value[1]+"px";
//					break;
//				case "rotate":
//					value = value.replace(/deg/g,"")+"deg";
//					break;
//			}
//			return this.editor.get("value") +"(" + value +")";
//		}
//		return this.inherited(arguments);
//	}
//	,set:function(name,value){
//		if(name == "value"){		
////			//console.log("############value=",value,"##",value.substring(0,value.indexOf("(")),"$$",value.substring(value.indexOf("(") + 1,value.indexOf(")")));
//			if(value && value.indexOf("(") != -1){
//				this.editor.set("value",value.substring(0,value.indexOf("(")));
////				this.editor2.set("value",value.substring(value.indexOf("(")+1).replace(/deg/g,""));
//				this.editor2.set("value",value.substring(value.indexOf("(") + 1,value.indexOf(")")));
//			}else{
//				this.editor.set("value","");
//				this.editor2.set("value","");
//			}
//		}else if(name == "disabled" || name == "readOnly"){
//			this.editor.set(name,value);
//			this.editor2.set(name,value);
//		}else{
//			this.inherited(arguments);
//		}
//	//this.editor.set(name,value);
//	}
//	,reset1:function(name,value){
//		if(name == "value"){
//			//this.editor.reset1("value",value);
//			console.log(this.declaredClass,"@@@@@@@@@@@@value=",value,value.substring(0,value.indexOf("(")),value.substring(value.indexOf("(") + 1,value.indexOf(")")));
//			if(value && value.indexOf("(") != -1){
//				this.editor.reset1("value",value.substring(0,value.indexOf("(")));
//				this.editor2.reset1("value",value.substring(value.indexOf("(") + 1,value.indexOf(")")));
//			}else{
//				this.editor.reset1("value","");
//				this.editor2.reset1("value","");
//			}
//		}else{
//			this.inherited(arguments);
//		}
//	}
	,isValid:function(){		
		return (this.editor.isValid() && this.editor2.isValid() && this.editor.get("value") != "" && this.editor2.get("value") != "");
	}
[/@]

[@define "agile.TransformOrigin","agile._MetadataAware"][#--agile._MetadataEditor--]
	[#assign templateString]
	<table><tr><td>
		<div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="x" data-dojo-props='options:"left,center,right,0,0%",width:"60px",required:true,defValue:"",placeHolder:"x-axis"' title="{i18n_x_axis_tooltip}"></div>
		</td><td>
		<div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="y" data-dojo-props='options:"top,center,bottom,0,0%",width:"60px",required:true,defValue:"",placeHolder:"y-axis"' title="{i18n_y_axis_tooltip}"></div>
		</td><td>
		[#--<div data-dojo-attach-point="z" data-dojo-type='agile.NumberComboBox' data-dojo-props='options:"0",unit:"px",width:"60px",defValue:"",required:true,placeHolder:"z-axis"' title="{i18n_z_axis_tooltip}"></div>--]
		</td></tr>
	</table>  
	[/#assign]
	templateString:"${templateString?js_string}",name:"transformOrigin",htmlName:"transform-origin"
	,init:function(){
			
		array.forEach(["x","y"],function(e){		
			this[e].watch("value",lang.hitch(this,function(name,old,value){
				this.onChange(this.get("value"),this.name,this.htmlName);
			}));
		},this);
	}
		
	,get:function(name){
		if(name == "value"){
			var value = this.x.get("value") +" "+ this.y.get("value");// +" "+ this.z.get("value");
			return value.replace(/null/g,"").trim();
		}
		return this.inherited(arguments);
	}
	,set:function(name,value){
		if(name == "value"){		
			if(value){
				var xyz = value.split(" ");
				this.x.set("value",xyz[0]);
				this.y.set("value",xyz[1]);
				//this.z.set("value",xyz[2]);
			}else{
				this.x.set("value","");
				this.y.set("value","");
				//this.z.set("value","");
			}
		}else if(name == "disabled" || name == "readOnly"){
			this.x.set(name,value);
			this.y.set(name,value);
			//this.z.set(name,value);
		}else{
			this.inherited(arguments);
		}
	//		this.editor.set(name,value);
	}
	,reset1:function(name,value){
		if(name == "value"){
			if(value){
				var xyz = value.split(" ");
				this.x.reset1("value",xyz[0] == null?"":xyz[0]);
				this.y.reset1("value",xyz[1] == null?"":xyz[1]);
				//this.z.reset1("value",xyz[2] == null?"":xyz[2]);
			}else{
				this.x.reset1("value","");
				this.y.reset1("value","");
				//this.z.reset1("value","");
			}
		}else{
			this.inherited(arguments);
		}
	}
	,isValid:function(){
		return this.x.isValid() && this.y.isValid();// && this.z.isValid();
	}	
[/@]		

[@define "agile.PerspectiveOrigin","agile._MetadataAware"][#--agile._MetadataEditor--]
	[#assign templateString]
	<table><tr><td>
	 <div data-dojo-attach-point="x" data-dojo-type='agile.NumberComboBox' data-dojo-props='options:"left,center,right,0,0%",width:"60px",title:"{i18n_perspetive_origin_x_tooltip}"'></div>
	</td><td>
	 <div data-dojo-attach-point="y" data-dojo-type='agile.NumberComboBox' data-dojo-props='options:"top,center,bottom,0,0%",width:"60px",title:"{i18n_perspetive_origin_y_tooltip}"'></div>
	</td></tr></table>  
	[/#assign]
	templateString:"${templateString?js_string}"	
	,init:function(){		
		this.x.on("change",lang.hitch(this,function(value){
			if(this.isValid()){
				this.onChange(this.get("value"),this.name,this.htmlName);
			}
		}));
		this.y.on("change",lang.hitch(this,function(value){
			if(this.isValid()){
				this.onChange(this.get("value"),this.name,this.htmlName);
			}
		}));
	}	
	,get:function(name){
		if(name == "value"){
			return (this.x.get("value") +" "+ this.y.get("value")).replace(/null/g,"").trim();
		}
		return this.inherited(arguments);
	}
	,set:function(name,value){
		if(name == "value"){		
			if(value && value != ""){
				var xyz = value.split(" ");
				this.x.set("value",xyz[0]);
				this.y.set("value",xyz[1]);			
			}else{
				this.x.set("value","");
				this.y.set("value","");			
			}
		}else if(name == "disabled" || name == "readOnly"){
			this.x.set(name,value);
			this.y.set(name,value);	
		}else{
			this.inherited(arguments);
		}
	//		this.editor.set(name,value);
	}
	,reset1:function(name,value){
		if(name == "value"){
			if(value && value != ""){
				var xyz = value.split(" ");
				this.x.reset1("value",xyz[0] == null?"":xyz[0]);
				this.y.reset1("value",xyz[1] == null?"":xyz[1]);			
			}else{
				this.x.reset1("value","");
				this.y.reset1("value","");
			}
		}else{
			this.inherited(arguments);
		}
	}
	,isValid:function(){
		return this.x.isValid() && this.y.isValid();
	}
[/@]


 [@define "agile.TransformMultiValueEditor","agile.MultiValueMetadataEditor"]
 	[#assign templateString]	
 	<form style="background-color:#87ceeb">
 		<div data-dojo-type="agile.MultiSelectEditorX" data-dojo-attach-point="selector" data-dojo-props='valueDelimeter:" "'>
 		 	<div data-dojo-type="agile.TransformOptionEditor" class="meditor" data-dojo-props='name:"transform",htmlName:"transform"'></div>
 	 	</div>
 	 </form> 
 	[/#assign]
 	templateString:"${templateString?js_string}"	
 	,name:"transform",htmlName:"transform"
 	,propertyNames:["transform"]		
	 ,init:function(){
		 this.inherited(arguments);
		 //TODO:fix me to add option when ENTER key is pressed
//		 aspect.after(this.meditors["transform"],"onEnterKeyPress",lang.hitch(this,function(){this.selector.addOption()}),true);
//		 aspect.after(this.meditors["transform"],"onEnterKeyPress",lang.hitch(this,function(){console.log("#############selector=",this.selector)}),true);
 	 }	 
 [/@]
[@define "agile.TransformEditor","agile._XMetadataEditor"]		
   [#assign templateString]
	<form style="background-color:#87ceeb">
	<table cellspacing="5px">	 
		<tr>
			<td nowrap="true" title="{i18n_transform_origin_tooltip}" class="tooltip">{i18n_transform_origin}</td>
			<td colspan="3"><div data-dojo-type='agile.TransformOrigin' class="peditor" ></div></td>				
		</tr>
		<tr>
			<td valign="top" title="{i18n_transform_tooltip}" class="tooltip">{i18n_transform}</td>	    			
			<td colspan="3">
			<div data-dojo-type='agile.TransformMultiValueEditor' class="peditor" ></div>
			</td>	    			
		</tr>
		[#--/*
		<tr>
			<td title="{i18n_transform_style_tooltip}" class="tooltip">{i18n_transformstyle}</td>
			<td><div data-dojo-type='agile.NumberComboBox' options="flat,preserve-3d" class="peditor" name="transformStyle" htmlName="transform-style"></div></td>
			<td title="{i18n_backface_visibility_tooltip}" class="tooltip">{i18n_backface_visibility}</td>
			<td><div data-dojo-type='agile.NumberComboBox' options="hidden,visible"  class="peditor" name="backfaceVisibility" htmlName="backface-visibility"></div></td>
		</tr>    	
		<tr>
			<td title="{i18n_perspective_tooltip}" class="tooltip">{i18n_perspective}</td>
			<td><div data-dojo-type='agile.NumberComboBox' regExp="^(\s*|[0-9]*)$"  class="peditor" name="perspective" htmlName="perspective"></div></td>
			<td nowrap="true" title="{i18n_perspective_origin_tooltip}" class="tooltip">{i18n_perspective_origin}</td>
			<td>					
				<div data-dojo-type='agile.PerspectiveOrigin'  class="peditor" name="perspectiveOrigin" htmlName="perspective-origin"></div>
			</td>
		</tr>*/
		--]  		
	</table></fieldset></form>
	[/#assign]
	 templateString:"${templateString?js_string}"
//	 ,init:function(){
//		 this.inherited(arguments);
//		 [#--/*
//		on(this.propertyEditors["transform"],"onChange",this,function(value){
//			array.forEach(["transformOrigin","transformStyle","backfaceVisibility","perspective","perspectiveOrigin"],function(e){
//				this.propertyEditors[e].set("disabled",!value);
//			},this);
//		});*/
//		--]
//		//TODO:centralize the logic
//		var prefix = "";
////		if(agile.isWebKit != undefined){
////			prefix="webkit";
////		 }else if(agile.isMozilla != undefined){			 
////			
////		 }else if(agile.isOpera != undefined){
////			
////		 }else if(agile.isIE == 9){
////			 prefix="ms";
////		 }else if(agile.isIE >= 10){
////			 
////		 }
//		for(var e in this.propertyEditors){
//			if(prefix){
//				this.propertyEditors[e].name = prefix + agile.capitalize(this.propertyEditors[e].name);
//				this.propertyEditors[e].htmlName = agile.stylePrefix + this.propertyEditors[e].htmlName;
//			}
//		}
//	 }	
[/@]  
